<template>
  <div class="huichuanshangpin">
    <top></top>
    <div v-loading='loading' style="padding: 20px;">

      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="lia acts" @click="goid('/gongju/tupianshengcheng/zhutu')">主图生成</div>
        <div class="lia"  @click="goid('/gongju/tupianshengcheng/xiangqingtu')">详情图生成</div>
      </div>

      <el-button round @click="kai()" type="danger" style="margin-bottom: 20px;">生成新的主图</el-button>

      <div class="kflex" style="gap: 30px;">
        <div v-for="item in list" :key="item.id">
          <div style="background: #C4C4C4; width: 260px; height: 260px; overflow: hidden;" class="kflexcc"><img :src="item.thumb" style="width: 100%;" ></div>
          <div class="kflexbc" style="padding: 10px; background: #E9E9E9; font-size: 12px;">
            <div style="color: #595959;">
              <div style="margin-bottom: 10px;">创建人：{{item.user_name}}</div>
              <div style="">时间：{{item.created_at}}</div>
            </div>
            <div class="kflexc">
              <div style="color: #0023FF; margin-right: 10px; cursor: pointer;" @click="$router.push('/gongju/tupianshengcheng/shengchengzhutu?id='+item.id)">编辑</div>
              <div style="color: #0023FF; cursor: pointer;" @click="shanchu(item)">删除</div>
            </div>
          </div>
        </div>
      </div>

      <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
    </div>

    <el-dialog title="添加回传产品" center :visible.sync="log" width="440px"  :close-on-click-modal="false" :close-on-press-escape="false">

        <div class="kflexc" style="margin-top: 20px;">
          <el-select v-model="id" style="width: 400px;" placeholder="请选择产品" filterable clearable>
            <el-option v-for="item in shangpinlists" :label="item.sku + '&' + item.name" :key="item.id" :value="item.id"></el-option>
          </el-select>
        </div>

    	  <span slot="footer" class="dialog-footer">
          <el-button type="info" round @click="log = false">取消</el-button>
          <el-button type="danger" round @click="xiugaigo">确定</el-button>
    	  </span>
    </el-dialog>

  </div>
</template>

<script>
  import top from '../top.vue'
  import axios from 'axios'
  export default {
    components:{
      top
    },
    name: "huichuanshangpin",
    data() {
      return {
        search:{
          page:1,
          page_size:20,
          product_name:"",
          track_number:""
        },
        list:[],
        total:0,
        log:false,
        all2:{
          name:"",
          sku:""
        },
        id:"",
        shangpinlists:[]
      }
    },
    created() {
      this.getlist()
    },
    mounted() {

    },
    methods: {
      shanchu:function(item){
        this.$confirm('确定删除么？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/tool/main/picture/del',{id:item.id})
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success('删除成功');
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },



      kai:function(){
        this.$router.push('/gongju/tupianshengcheng/shengchengzhutu')
      },



      dosearch: function() {
        this.search.page = 1
        this.getlist()
      },

      //翻页
      fanye: function(page) {
        this.search.page = page
        this.getlist()
      },


      //获取列表
      getlist: function() {
        axios.get('/api/plan-market/tool/main/picture/list',{params:this.search})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
              this.loading = false
            }
          })
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/zuixin.scss";
</style>
